<template>
  <div class="app">
    <div class="login">
      <h1>用户登录</h1>
      <el-form
        :model="form"
        :rules="checkLogin"
        ref="loginall"
        label-width="80px"
      >
        <el-form-item label="活动名称" prop="account">
          <el-input v-model="form.account" type="text">
            <i slot="prefix" class="iconfont icon-yonghufill"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="活动密码" prop="password">
          <el-input  @keyup.native.enter="login" v-model="form.password" :type="flag ? 'text' : 'password'">
            <i slot="prefix" class="iconfont icon-mima"></i>
            <i
              slot="suffix"
              :class="[
                'iconfont',
                flag
                  ? 'icon-yanjing_huaban1'
                  : 'icon-05wangluoanquan_biyanjing',
              ]"
              @click="flag = !flag"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>@@@</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { api_login } from "../../api/users.js";
import local from '../../utils/local.js'
//导入计算路由的方法
import {jisuan} from '../../router/index.js'
export default {
  data() {
    return {
      flag: true,
      form: {
        account: "",
        password: "",
      },
      checkLogin: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login() {
      // 总体表单验证  确认提交       refs【】 对应ref
      this.$refs["loginall"].validate(async (b) => {
        if (b) {
          // this.$router.replace("/home");
          let rst = await api_login("/users/checkLogin", this.form);
          let {code,msg,token,role}=rst
          if(code==0){
            //讲token存入到本地
            local.set('roles',role)
            local.set('sell_token',token)
            //调用路由组件
              jisuan()
          this.$router.replace("/home");
          }else{
            // this.$message.error(msg)
            this.$message({
              type:'error',
              message:msg
            })
          }
          console.log(rst);
        } else {
          alert("???");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: skyblue;
  justify-content: center;
  align-items: center;

  .login {
    h1 {
      margin-bottom: 20px;
    }
    text-align: center;
    width: 400px;
    height: 400px;
    // border: 1px solid red;
  }
}
</style>